<template>
  <div class="main_spac1 maincl">
    <div class="main_white padding10">
      <div class="mainor_form">
        <!-- <div class="mainor_te">
          <el-button @click="addAction" class="marginLeft10" type="primary"
            >新增</el-button
          >
        </div> -->
        <el-form
          :inline="true"
          :model="form"
          class="demo-form-inline"
          ref="userListFrom"
          label-width="80px"
        >
          <el-form-item label="供应商名称" prop="company_name">
            <el-input
              clearable
              v-model.trim="form.company_name"
              placeholder="供应商名称"
              class="wid220"
            ></el-input>
          </el-form-item>

          <!-- <el-form-item label="供应商状态" prop="domain_name">
            <el-radio-group v-model="form.domain_name">
              <el-radio :label="1">激活</el-radio>
              <el-radio :label="2">冻结</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item>
            <el-button
              class="reset marginLeft10"
              type="primary"
              @click="reset()"
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="getArticleList"
              :loading="listLoading"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div class="main_table" style="min-height: 590px">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          element-loading-text="加载中"
          fit
          border
          highlight-current-row
        >
          <el-table-column type="index" />
          <el-table-column label="供应商名称" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{ scope.row.company_name }}</template>
          </el-table-column>
          <el-table-column label="负责人名称" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{ scope.row.contact_name }}</template>
          </el-table-column>
          <el-table-column label="负责人手机号" :show-overflow-tooltip="true">
            <template slot-scope="scope">{{ scope.row.phone_number }}</template>
          </el-table-column>
          <!-- <el-table-column
            label="营业执照"
            width="130"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{
              scope.row.business_license
            }}</template>
          </el-table-column>
          <el-table-column
            label="介绍信"
            width="130"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">{{
              scope.row.introduction_letters
            }}</template>
          </el-table-column> -->

          <el-table-column
            label="申请时间"
            prop="created_at"
            :show-overflow-tooltip="true"
          />
          <el-table-column fixed="right" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                @click="delete_btn(scope.row.id)"
                type="text"
                size="mini"
                class="handle_btn"
                >审核</el-button
              >
              <!-- <el-button
                @click="account(scope.row)"
                type="text"
                size="mini"
                class="handle_btn"
                >查看资质</el-button
              > -->
            </template>
          </el-table-column>
          <!-- <el-table-column type="index">
            <template slot-scope="scope">

            </template>
          </el-table-column> -->
        </el-table>
      </div>

      <div class="main_page boxdq">
        <div></div>
        <div class="main_page_r">
          <el-pagination
            :current-page="current.page"
            :page-sizes="[5, 30, 50, 100]"
            :page-size="current.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            background
            @size-change="changeLimit"
            @current-change="changePage"
          />
        </div>
      </div>
    </div>

    <!-- <el-dialog title="供应商审核" :visible.sync="dialogVisible" width="70%">
      <el-form :rules="rules" ref="agentForm" :model="agentForm" label-width="80px">
        <el-form-item label="资质简图:">
          <el-upload :action="uploadPath" list-type="picture-card" :data="{ store: 'saas/contract' }"
            style="min-height: 120px" :file-list="filelist" :disabled="true" :on-preview="handlePictureCardPreview">
          </el-upload>
          <el-dialog :visible.sync="dialogVisible1" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="备注:" prop="audit_remark">
          <el-input type="textarea" :rows="2" placeholder="请输入审核备注" :disabled="disabled" v-model="agentForm.audit_remark">
          </el-input>
        </el-form-item>
        <el-form-item label="审核状态:" prop="audit_status">
          <el-select class="remark" :disabled="disabled" v-model="agentForm.audit_status" placeholder="请选择审核状态">
            <el-option label="同意" :value="1"></el-option>
            <el-option label="拒绝" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="disabled" @click="sublemt">确 定</el-button>
      </span>
    </el-dialog> -->

    <!-- 审核供应商 -->
    <el-dialog
      title="审核供应商"
      :visible.sync="addedVisible"
      width="70%"
      @close="closeVisible"
    >
      <el-form
        ref="addForm"
        :rules="rules"
        :model="addForm"
        label-width="180px"
      >
        <el-form-item label="供应商名称" prop="company_name">
          <el-input v-model="addForm.company_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="负责人名称" prop="contact_name">
          <el-input v-model="addForm.contact_name" disabled></el-input>
        </el-form-item>
        <el-form-item label="负责人手机号" prop="phone_number">
          <el-input v-model="addForm.phone_number" disabled></el-input>
        </el-form-item>
        <el-form-item label="营业执照" prop="营业执照">
          <el-image
            style="width: 100px; height: 100px"
            :src="addForm.business_licenses"
            :preview-src-list="addForm.business_license"
          >
          </el-image>
        </el-form-item>
        <el-form-item label="介绍信" prop="company_name">
          <el-image
            style="width: 100px; height: 100px"
            :src="addForm.introduction_letter"
            :preview-src-list="addForm.introduction_letters"
          >
          </el-image>
        </el-form-item>
        <el-form-item label="审核" prop="audit_status">
          <el-radio-group v-model="addForm.audit_status">
            <el-radio :label="1">审核成功</el-radio>
            <el-radio :label="2">审核失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="域名"
          prop="domain_name"
          v-if="addForm.audit_status == 1"
        >
          <el-input v-model="addForm.domain_name">
            <template slot="append">.cadj.cn</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="域名预览"
          v-if="addForm.domain_name && addForm.audit_status == 1"
        >
          <span>{{ addForm.domain_name }}.cadj.cn</span>
        </el-form-item>
        <el-form-item label="备注" prop="audit_remark"
          ><el-input
            type="textarea"
            :rows="2"
            placeholder="请输入备注"
            v-model="addForm.audit_remark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeVisible">取 消</el-button>
        <el-button type="primary" :disabled="disabled" @click="submitSupplier"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 查看资质 -->
    <el-dialog title="资质查看" :visible.sync="qualifDialog" width="50%">
      <img
        style="width: 400px; height: 300px"
        src="https://fc4tn.baidu.com/it/u=3495507288,3563650994&fm=202"
        alt=""
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="qualifDialog = false">取 消</el-button>
        <el-button type="primary" @click="qualifDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uploadPath } from "@/api/currency";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { Debounce } from "@/utils/index";
import {
  getList,
  getDetails,
  supplierInfo,
  // // 查询供应商列表
  // getSupplierList,
  // // 删除供应商
  // delSupplierList,
} from "@/api/supplier/index";
export default {
  name: "advertisement",
  data() {
    return {
      // 新增供应商时的模态框
      addedVisible: false,
      // 新增供应商的表单
      addForm: {
        // 供应商ids
        supplier: null,
      },
      // 新增供应商的校验
      addrules: {
        supplier: [
          { required: true, message: "请选择供应商", trigger: "change" },
        ],
      },
      // 所有供应商
      supplierList: [],
      // 供应商列表的格式
      supplierProps: {
        value: "id",
        label: "name",
      },
      uploadPath,
      form: {
        company_name: null,
        domain_name: null,
      },

      userType: [
        {
          name: "开启",
          id: 1,
        },
        {
          name: "关闭",
          id: 2,
        },
      ],

      // 加载功能
      listLoading: false,
      // 列表字段
      list: [],

      // 分页
      current: {
        page: 1,
        limit: 20,
      },
      totalCount: 0,

      // 校验规则
      rules: {},
      // 新增的模态框
      dialogVisible: false,
      // 新增的表单信息
      agentForm: {
        id: null,
        company_name: null,
        contact_name: null,
        phone_number: null,
        business_licenses: null,
        business_license: [],
        introduction_letter: null,
        introduction_letters: [],
        domain_name: null,
        addForm: null,
        audit_remark: null,
      },

      rules: {
        audit_status: [
          { required: true, message: "请选择审核结果", trigger: "change" },
        ],
        audit_remark: [
          { required: true, message: "请输入备注", trigger: "blur" },
        ],
        domain_name: [
          { required: true, message: "请输入域名", trigger: "blur" },
        ],
      },

      // 查看已上传的图片二级模态框
      dialogVisible1: false,
      // 查看已上传的图片链接
      dialogImageUrl: null,

      filelist: [],
      disabled: false,

      // 查看资质的模态框
      qualifDialog: false,
    };
  },
  created() {
    // 获取所有供应商列表
    this.getSupplierList();
  },
  methods: {
    // 新增供应商时打开的模态框
    addAction() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      new Promise((resolve, reject) => {
        let data = Object.assign(
          {
            sign: Md5(
              objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
            ),
          },
          apiUrl().name
        );
        querySupplierList(data).then((res) => {
          if (res.errcode == 0) {
            resolve(res.data);
          } else {
            this.$message.error(res.errmsg);
            loading.close();
          }
        });
      }).then((list) => {
        this.supplierList = list;
        this.addedVisible = true;
        loading.close();
      });
    },
    // 新增供应商
    submitSupplier: Debounce(function () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.disabled = true;
          let data = {
            action: "audit",
            domain_name: this.addForm.domain_name + ".cadj.cn",
            id: this.addForm.id,
            admin_audit_status: this.addForm.audit_status,
            admin_audit_remark: this.addForm.audit_remark,
          };
          let query = this.getPackage(data);
          supplierInfo(query).then((res) => {
            if (res.errcode == 0) {
              this.$message.success(res.errmsg);
              this.disabled = false;
              this.getSupplierList();
              this.addedVisible = false;
            } else {
              this.$message.error(res.errmsg);
              this.disabled = false;
            }
          });
        } else {
          return false;
        }
      });
    }),
    // 关闭新增供应商模态框
    closeVisible() {
      this.$refs.addForm.resetFields();
      this.addedVisible = false;
    },
    // 获取供应商列表
    getSupplierList() {
      this.listLoading = true;

      let data = {
        page: this.current.page,
        per_page: this.current.limit,
      };
      let query = this.getPackage(data);
      getList(query).then((res) => {
        if (res.errcode == 0) {
          this.list = res.data.list;
          this.totalCount = res.data.count;
          this.listLoading = false;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 审核供应商
    delete_btn(id) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      let data = {
        id,
      };
      let query = this.getPackage(data);
      getDetails(query).then((res) => {
        if (res.errcode == 0) {
          this.addForm = res.data;
          let business_license = this._.cloneDeep(res.data.business_license);
          this.addForm.business_licenses = res.data.business_license;
          this.addForm.business_license = business_license.split(",");
          this.addForm.introduction_letters = res.data.introduction_letters;
          this.addForm.introduction_letter = res.data.introduction_letters[0];
          this.addedVisible = true;
          loading.close();
        }
      });
    },

    // 重置
    reset() {
      this.$refs["userListFrom"].resetFields();
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.getSupplierList();
    },
    // 多选
    handleSelectionChange() {},
    // 新增
    editAction() {
      this.dialogVisible = true;
    },
    // 切换分页大小
    changeLimit(e) {
      this.current.limit = e;
      this.getSupplierList();
    },
    // 切换分页
    changePage(e) {
      this.current.page = e;
      this.getSupplierList();
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview() {},
    // 移除文件时的钩子
    handleRemove() {},
    // 表单提交
    sublemt() {},
    // 查看资质
    account(row) {
      this.qualifDialog = true;
    },
    // 封装请求前函数
    getPackage(data) {
      return Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, data)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        data
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.maincl {
  .more {
    margin-left: 50px;
  }

  .handle_btn {
    padding: 0;
    border: 0;
  }

  .edit_dialog {
    .address {
      max-width: 350px;
    }
  }

  .mainor_form form {
    width: 100%;
  }

  .logoStyle {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    overflow: auto;

    .logo {
      min-width: 100px;
      width: 100px;
      height: 67px;
      margin-right: 10px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .logoStyle::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .main_table /deep/.el-table--small td {
    padding: 10px 0;
  }

  .main_table /deep/.el-table--small th {
    padding: 10px 0;
  }

  /deep/.el-table {
    tr {
      &:hover {
        background: none !important;
      }

      &.hover-row > td {
        background: none !important;
      }

      .current-row > td {
        background: none !important;
      }
    }
  }

  /deep/.main_table .el-table--small td .cell {
    height: auto !important;
  }

  /deep/.el-table .el-table__body tr:hover {
    background: #fff !important;
  }

  /deep/.el-table .el-table__body tr:hover > td {
    background: #fff !important;
  }

  /deep/.el-table tr.expanded + tr {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr > td {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .mainex_ta {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .mainex_ta th,
  /deep/.el-table tr.expanded + tr .mainex_ta tr {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr:hover {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr:hover > td {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .el-table tr:hover {
    background: #fafafa !important;
  }

  /deep/.el-table tr.expanded + tr .el-table tr:hover > td {
    background: #fafafa !important;
  }

  /deep/.el-table .cell {
    display: flex;
    align-items: center;
  }

  /deep/.boxdq {
    justify-content: flex-end;
  }
}

.exptitle {
  padding: 10px 0px;
}
</style>